<script setup lang='ts'>
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'

import { useDeleteRight, useGetRightPage, useUpdateRightStatus } from '@fl/api/man-api'
import { SearchTable } from '@fl/components'
import { useMessage } from '@fl/hooks/web/use-message'
import { cloneDeep } from 'lodash-es'

import AddOrEdit from './add-or-edit.vue'

defineOptions({
    // eslint-disable-next-line vue/component-definition-name-casing
    name: '/operations-pages/member/rights',
})

const { createConfirmModal } = useMessage()

const form = ref('')

const gridOptions = reactive<VxeGridProps>({
    columns: [
        { fixed: 'left', title: '序号', type: 'seq', width: 50 },
        { slots: { default: 'imageUrl' }, title: '权益图标' },
        { field: 'rightName', showOverflow: true, title: '权益名称' },
        { field: 'description', showOverflow: true, title: '权益说明' },
        { slots: { default: 'status' }, title: '权益状态' },
        { field: 'updateTime', title: '最后修改时间' },
        { slots: { default: 'operate' }, title: '操作', width: 300 },
    ],
    height: 700,
    showOverflow: false,
    toolbarConfig: {
        slots: {
            buttons: 'toolbar_buttons',
        },
    },

})
const initialPage = {
    currentPage: 1,
    pageSize: 10,
    total: 0,
}

const tablePage = ref(cloneDeep(initialPage))

const params = computed(() => {
    return {
        pageNum: tablePage.value.currentPage,
        pageSize: tablePage.value.pageSize,
    }
})

const { data, isLoading } = useGetRightPage(params)

const { isPending: updateRightLoading, mutate: updateRightMutate } = useUpdateRightStatus()

const { isPending: deleteRightLoading, mutate: deleteRightMutate } = useDeleteRight()

const loading = computed(() => isLoading.value || updateRightLoading.value || deleteRightLoading.value)

const tableData = ref<any[]>([])
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}

const id = ref<any>('')

const visible = ref<boolean>(false)

function showAdd() {
    visible.value = true
}

function showEdit(row: any) {
    id.value = row.id
    form.value = row
    visible.value = true
}
function changeStatus(row: any) {
    const params = { id: row.id, status: row.status === 0 ? 1 : 0 }
    updateRightMutate(params, {
        onSuccess: () => {
            ElMessage.success('操作成功')
        },
    })
}

function deleteRow(row: any) {
    createConfirmModal({ content: '是否确认删除？', onError: () => {
        console.log('操作取消！')
    }, onSuccess: () => {
        deleteRightMutate(row.id, {
            onSuccess: () => {
                ElMessage.success('操作成功')
            },
        })
    } })
}

watchEffect(() => {
    if (data.value) {
        tableData.value = cloneDeep(data.value.records || [])
        tablePage.value.total = data.value.total ?? 0
    }
})
</script>

<template>
    <el-card shadow="never">
        <div mb-20
             text-16
             font-700
        >
            会员权益管理
        </div>

        <SearchTable v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :seq-config="{ startIndex: (tablePage.currentPage - 1) * tablePage.pageSize }"
                     :loading="loading"
                     :data="tableData"
                     @page-change="handlePageChange"
        >
            <template #toolbar_buttons>
                <div flex
                     w-full
                     justify-between
                     items-center
                >
                    <div text-14
                         font-700
                    >
                        权益列表
                    </div>

                    <el-button type="primary"
                               @click="showAdd"
                    >
                        新建
                    </el-button>
                </div>
            </template>

            <template #imageUrl="{ row }">
                <div py-10
                     flex
                     justify-center
                     items-center
                >
                    <el-image v-if="row.imageUrl"
                              :src="row.imageUrl"
                              :preview-src-list="[row.imageUrl]"
                              fit="contain"
                              style="width: 50px; height: 50px"
                    />
                </div>
            </template>

            <template #status="{ row }">
                <vxe-switch :model-value="row.status === 1"
                            @click="changeStatus(row)"
                />
            </template>

            <template #operate="{ row }">
                <el-button text
                           @click="showEdit(row)"
                >
                    编辑
                </el-button>

                <el-button text
                           @click="deleteRow(row)"
                >
                    删除
                </el-button>
            </template>
        </SearchTable>
    </el-card>

    <AddOrEdit :key="id"
               v-model:visible="visible"
               v-model:id="id"
               v-model:form="form"
    />
</template>
